<template>
  <div class="My">
    <div class="my_wrapper">
      <div class="mp">
        <div class="xx">
          <div class="tx" v-if="userInfo.headImgUrl">
            <img :src="userInfo.headImgUrl" alt />
          </div>
          <div class="tx" v-else>
            <img
              src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2671405889,3132669299&fm=26&gp=0.jpg"
              alt
            />
          </div>
          <p>{{userInfo.nickname}}</p>
        </div>
      </div>
      <ul class="strip">
        <li v-for="(v, i) in items" :key="i" @click="ClickEach(v.txt, i)">
          <div class="hxys">
            <div class="lc">
              <img :src="v.img" alt />
              <span class="tit">{{v.txt}}</span>
            </div>
            <div class="rc">
              <img src="@/assets/activity/jt.png" alt />
            </div>
          </div>
          <van-divider />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import myTabbar from "./components/myTabbar";
export default {
  name: "My",
  data() {
    return {
      userInfo: [],
      items: [
        {
          img: require("@/assets/my/formfill.png"),
          txt: "我的事件",
          txtT: "正在定位..."
        },
        {
          img: require("@/assets/my/yundonghuwaileimu-fill.png"),
          txt: "我的活动",
          txtT: "137分钟"
        },
        // {
        //   img: require("@/assets/my/yuyue.png"),
        //   txt: "我的预约",
        //   txtT: "00:00",
        //   sx: "刷新"
        // },
        {
          img: require("@/assets/my/xinxi.png"),
          txt: "我的信息",
          txtT: "00:00",
          sx: "刷新"
        },
        {
          img: require("@/assets/my/fankui.png"),
          txt: "意见反馈",
          txtT: "00:00",
          sx: "刷新"
        },
        // ,
        // {
        //   img: require("@/assets/my/guanyu.png"),
        //   txt: "关于我们",
        // },
        {
          img: require("@/assets/my/jifen.png"),
          txt: "积分管理办法",
          txtT: "00:00",
          sx: "刷新"
        },
        {
          img: require("@/assets/my/shequka.png"),
          txt: "我的社区卡",
          txtT: "00:00",
          sx: "刷新"
        }
      ]
    };
  },
  components: {
    myTabbar: myTabbar
  },
  created() {
    // this.loadxx();
    console.log("个人信息：" + JSON.stringify(this.slow.userInfo));
    if (this.slow.userInfo) {
      this.userInfo = this.slow.userInfo;
    }
  },
  methods: {
    // loadxx() {
    //   this.$toast.loading({
    //     message: '加载中……',
    //     forbidClick: true
    //   });
    //   this.post('/publicUser/loginPublicUser')
    //     .then(r => {
    //       this.$toast.clear();
    //       console.log(r)
    //     })
    // },
    ClickEach(data, i) {
      console.log(data);
      switch (i) {
        case 0:
          this.$router.push("/myKnockOut");
          break;
        case 1:
          this.$router.push("/MyActivities");
          break;
        case 3:
          // this.$router.push('/MyAppoint');
          this.$router.push("/feedback");
          break;
        case 2:
          this.$router.push("/MyMessage");
          break;
        case 4:
          this.$router.push("/integralManage");
          break;
        case 5:
          this.$router.push("/communityCard");
          break;
      }
    }
  }
};
</script>

<style lang="scss">
@import "~@/smobile.scss";
.My {
  .tabbarBox {
    .tabbarItem {
      justify-content: flex-end;
      margin-bottom: $sm-spacing-col-base;
      z-index: 2;
      .tabbarIcon {
        height: $sm-icon-px-lg !important;
      }
    }
  }
  .my_wrapper {
    margin-bottom: 4vw;
    background: url(../assets/my/34.png);
    /*background-size: cover;*/
    position: absolute;
    top: 0;
    height: 100vh;
    .top {
      width: 100vw;
    }
    .mp {
      margin-top: 40px;
      width: 100vw;
      height: 40vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .xx {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .tx {
          height: 80px;
          width: 80px;
          border-radius: 50%;
          background: #ffffff;
          margin-bottom: 15px;
          img {
            height: 80px;
            width: 80px;
            display: block;
            border-radius: 50%;
          }
        }
      }
    }
    .strip {
      background: #ffffff;
      padding-top: 15px;
      li {
        padding: 0 15px;
        .hxys {
          width: 100%;
          height: 25px;
          line-height: 25px;
          display: flex;
          justify-content: space-between;
          align-content: center;
          .lc {
            font-size: 18px;
            color: #333;
            img {
              display: inline-block;
              margin-right: 15px;
              width: 25px;
              height: 25px;
              vertical-align: bottom;
            }
          }
          .rc {
            img {
              width: 25px;
              height: 25px;
            }
          }
        }
      }
      li:nth-last-child(1) {
        .van-divider.van-divider--hairline {
          border-color: #fff;
        }
      }
    }
  }
}
</style>
